<div class="env-container">
  <nzi-help [ngClass]="{'env-help':!isInForm,'env-config-help':isInForm}" [options]="{'title':'value由不为空的任意值组成;<br/>key和value组成的键值对不能重复,可以设置0-100对。'}"></nzi-help>
  <nz-table #editRowTable nzBordered [nzData]="envVariableInitData" [nzShowPagination]="false">
    <thead>
      <tr>
        <th nzWidth="45%">key</th>
        <th nzWidth="45%">value</th>
        <th></th><!--action-->
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of editRowTable.data" class="editable-row">
        <td>
          <input type="text" nz-input placeholder="请输入环境变量" [ngClass]="{'input-style': !inputFirstInit && ((data.key && !keyRegExp.test(data.key)) || data.key === '' || duplicationValid(data)) }" [(ngModel)]="data.key" (ngModelChange)="keyChange(data)" [ngModelOptions]="{standalone: true}" (input)="inputEnvVariables(data.id)" />
        </td>
        <td>
          <input type="text" nz-input placeholder="请输入环境变量的值" [ngClass]="{'input-style': !inputFirstInit && ( data.value == '' || duplicationValid(data) )}" [(ngModel)]="data.value" (ngModelChange)="valueChange(data)" [ngModelOptions]="{standalone: true}" (input)="inputEnvVariables(data.id)" /></td>
        <td>
          <a href="javascript:void(0);" [hidden]="(data.id === '0' && envVariableInitData.length <= 1) || envVariableInitData.length <= 1" style="font-size:16px;" (click)="deleteRow(data.id)">X</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <nz-form-explain class="help-text mt4" [ngClass]="{'help-error':!keyValid}">key：由2-64个字符组成，以字母开始，包含字母、数字或者下划线</nz-form-explain>
  <nz-form-explain class="help-text mt4" *ngIf="!valueValid" [ngClass]="{'help-error':!valueValid}">value：由不为空的任意值组成</nz-form-explain>
  <nz-form-explain class="help-text mt4" *ngIf="(duplicationValidator || outputEnvVariables.length > maxEnvNumber)" [ngClass]="{'help-error':(duplicationValidator || outputEnvVariables.length > maxEnvNumber) }">key和value组成的键值对不能重复,可以设置0-{{maxEnvNumber}}对</nz-form-explain>
</div>
